<template>
	<view>
		<view class="tabList">
			<view v-for="(item,index) in tabList" :class="index == currentTab ? 'act' : ''" @tap="sele(item.status)" :key="index">
				{{ item.name }}
			</view>
		</view>
		<view class="main" v-if="bl">
			<view v-for="item in lists" class="box">
				<view class="up">
					<view class="left">
						订单编号: {{item.order.orderSn}}
					</view>
					<view class="right">
						{{ item.order.status | statusText }}
					</view>
				</view>
				<view class="center">
					<view v-for="(ele,index) in item.items" class="center-c" :key="index">
						<image :src="ele.productSkuPic" mode=""></image>
						<view class="text">
							<view class="c-top">
								<view class="title">
									{{ele.productName}}
								</view>
								<view class="price">
									￥{{ele.productPrice}}
								</view>
							</view>
							<view class="c-c">
								<view class="top">
									<view class="left">
										编号: {{ele.id}}
									</view>
									<view class="right">
										X{{ele.productQuantity}}
									</view>
								</view>
								<view class="guige">
									<view>
										规格:
									</view>
									<view class="norms">
										<view class="n-box" v-for="(item1,index) in ele.productAttr" :key="index">
											{{item1.key}}:
											{{item1.value}}
										</view>
										<view v-if="currentTab == 2 && ele.isReturn == 0">
											<navigator :url="`../orderReturns/orderReturns?id=${ele.orderId}&id1=${ele.id}`">退货</navigator>
										</view>
										<view class="act" v-if="ele.isReturn == 1">
											退货中
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="bottom">
					<view class="b-top">
						<view class="time">
							时间: {{item.order.createTime}}
						</view>
						<view class="total">
							合计: ￥{{item.order.totalAmount}}
						</view>
					</view>

					<view class="btn">
						<view class="btn-box" v-if="currentTab == 0">
							<view @tap="cancel(item.order.id)">
								取消订单
							</view>
							<view @tap="buy(item.order.id)">
								付款
							</view>
						</view>
						<view class="btn-box" v-if="currentTab == 2">
							<view @tap="receive(item.order.id)">
								确认收货
							</view>
							<!-- <view>
								<navigator :url="`../orderReturns/orderReturns?id=${item.orderId}&id1=${item.id}`">退货</navigator>
							</view> -->
						</view>
						<view class="btn-box" v-if="currentTab == 3">
							<view v-if="item.order.status == 4" @tap="del(item.order.id)">
								删除订单
							</view>

						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="main" v-else-if="!bl">
			<view v-for="item in ReturnList" class="box">
				<view class="up">
					<view class="left">
						订单编号: {{item.orderSn}}
					</view>

					<view class="right" :class="item.status == 0?'':'act'">
						<navigator :url="`../orderReturns/orderBackInfo/orderBackInfo?id=${item.id}&id1=${item.companyAddressId}`">{{ item.status | returnStatus }}</navigator>
					</view>
				</view>
				<view class="center">
					<view class="center-c">
						<image :src="item.productPic" mode=""></image>
						<view class="text">
							<view class="c-top">
								<view class="title">
									{{item.productName}}
								</view>
								<view class="price">
									￥{{item.productRealPrice}}
								</view>
							</view>
							<view class="c-c">
								<view class="top">
									<view class="left">
										编号: {{item.id}}
									</view>
									<view class="right">
										X{{item.productCount}}
									</view>
								</view>
								<view class="guige">
									<view>
										规格:
									</view>
									<view class="norms">
										<view class="n-box" v-for="(item1,index) in item.productAttr" :key="index">
											{{item1.key}}:
											{{item1.value}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="bottom">
					<view class="b-top">
						<view class="time">
							时间: {{item.createTime}}
						</view>
						<view class="total">
							合计: ￥{{item.returnAmount}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		findAllOrders,
		orderReturnApplys,
		cancelOrder,
		receiveDone,
		deleteOrder
	} from "@/api/mine/mine.js"
	export default {
		filters: {
			statusText(val) {
				if (val == 0) {
					return "未付款"
				} else if (val == 1) {
					return "确认付款,等待发货"
				} else if (val == 2) {
					return "已发货"
				} else if (val == 3) {
					return "已收货"
				} else if (val == 9) {
					return "拒绝退货"
				} else {
					return "暂定"
				}

			},
			returnStatus(state) {
				if (state == 0) {
					return "待处理"
				} else if (state == 1) {
					return "退货中"
				} else if (state == 2) {
					return "已完成"
				} else if (state == 3) {
					return "已拒绝"
				} else {
					return "暂未定义"
				}
			}
		},

		data() {
			return {
				bl: true,
				list: [],
				items: [],
				ReturnList: [],
				currentTab: 0,

				tabList: [{
						name: "待付款",
						status: 0
					},
					{
						name: "已付款",
						status: 1
					},
					{
						name: "已发货",
						status: 2
					},
					{
						name: "已收货",
						status: 3
					},
					{
						name: "申请退款",
						status: 4
					},
				]

			}
		},

		onLoad(a) {

			this.currentTab = a.id
			this.getList();
			this.getReturnList()
		},
		methods: {
			getList() {
				uni.showLoading({
				    title: '加载中'
				});
				findAllOrders().then(res => {
					console.log(res)
					this.list = res.data.orderList
					uni.hideLoading();
					for (var i = 0; i < this.list.length; i++) {
						this.list[i].items.forEach(el => {
							el.productAttr = JSON.parse(el.productAttr)
						})
					}

				})
			},
			getReturnList() {
				if (this.currentTab == 4) {
					this.bl = false
				} else {
					this.bl = true
				}
				orderReturnApplys().then(res => {
					console.log(res)
					this.ReturnList = res.data.items

					this.ReturnList.forEach(el => {
						el.productAttr = JSON.parse(el.productAttr)
					})
				})
			},
			cancel(val) {
				cancelOrder(val).then(res => {
					console.log(res)
					if(res.success){
						uni.showToast({
						    title: '取消成功',
						    duration: 2000
						});
						setTimeout(()=>{
							uni.redirectTo({
								url: `/pages/mine/order/order?id=${this.currentTab}`
							});
						},1000)
					}
					
				})
				// console.log(val)
			},
			buy(val) {
				uni.navigateTo({
						
					url: `/pages/Detail/confirmOrder/confirmOrder?id=${val}`

				})
			},
			sele(val) {
				this.currentTab = val;
				if (this.currentTab == 4) {
					this.bl = false
				} else {
					this.bl = true
				}
			},
			receive(val) {
				console.log(val)
				receiveDone({
					orderId: val
				}).then(res => {
					console.log(res)
					if(res.success){
						uni.showToast({
						    title: '操作成功',
						    duration: 2000
						});
						setTimeout(()=>{
							uni.redirectTo({
								url: `/pages/mine/order/order?id=${this.currentTab}`
							});
						},1000)
					}else{
						uni.showToast({
						    title: `${res.message}`,
							icon:'none',
						    duration: 2000
						});
					}
				})
			},
			del(val) {
				deleteOrder(val).then(res => {
					console.log(res)
				})
			}
		},
		computed: {
			lists() {
				var orderList = "";
				var _this = this;
				if (this.currentTab == 3) {
					orderList = this.list.filter(el => {
						return el.order.status == 3 || el.order.status == 4
					})
				} else {
					orderList = _this.list.filter(el => {
						return el.order.status == _this.currentTab
					})
				}
				return orderList
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './css/order.scss'
</style>
